<!DOCTYPE html>
<html>
<head>
    <title>DeepSeek R1 对话助手</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <style>
        body { max-width: 800px; margin: 0 auto; padding: 20px; font-family: Arial, sans-serif; }
        #chat-box { height: 500px; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; overflow-y: auto; }
        .message { margin: 10px 0; padding: 8px; border-radius: 5px; }
        .user { background-color: #e3f2fd; text-align: right; }
        .bot { background-color: #f5f5f5; }
        #input-box { display: flex; gap: 10px; }
        #user-input { flex: 1; padding: 10px; }
        button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        button:hover { background-color: #45a049; }
        button:disabled {
            background-color: #cccccc !important;
            cursor: not-allowed;
        }
        .message pre {
            background-color: #f8f8f8;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .message code {
            font-family: 'Courier New', monospace;
        }
        .loading-dots {
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .dot {
            width: 8px;
            height: 8px;
            background-color: #666;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes bounce {
            0%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-6px); }
        }
    </style>
</head>
<body>
    <h1>DeepSeek R1 对话助手</h1>
    <div id="chat-box"></div>
    <div id="input-box">
        <input type="text" id="user-input" placeholder="输入你的消息...">
        <button onclick="sendMessage()">发送</button>
    </div>

    <script>
        let context = []; // 保存对话上下文
        
        function appendMessage(message, isUser) {
            const chatBox = document.getElementById('chat-box');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user' : 'bot'}`;
            
            // 添加头像和内容容器
            const content = `
                <div style="display: flex; gap: 10px; align-items: start">
                    <div style="font-weight: bold">${isUser ? '👤 你' : '🤖 助手'}:</div>
                    <div class="message-content" style="flex:1"></div>
                </div>
            `;
            messageDiv.innerHTML = content;
            
            const contentDiv = messageDiv.querySelector('.message-content');
            
            if (isUser) {
                contentDiv.textContent = message;
            } else {
                // 渲染Markdown
                const html = marked.parse(message);
                contentDiv.innerHTML = html;
                
                // 高亮代码块
                contentDiv.querySelectorAll('pre code').forEach((block) => {
                    hljs.highlightElement(block);
                });
                
                // 添加打字机效果
                typewriterEffect(contentDiv, html);
            }
            
            chatBox.appendChild(messageDiv);
            chatBox.scrollTop = chatBox.scrollHeight;
        }

        // 修改打字机效果函数
        function typewriterEffect(element, html) {
            element.innerHTML = ''; // 清空内容
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = html;
            
            let nodes = [...tempDiv.childNodes];
            let index = 0;
            const speed = 30;

            function addNode() {
                if (index < nodes.length) {
                    const node = nodes[index].cloneNode(true);
                    element.appendChild(node);
                    index++;
                    setTimeout(addNode, speed);
                }
            }
            
            addNode();
        }

        function createLoadingIndicator() {
            const container = document.createElement('div');
            container.className = 'message bot';
            container.innerHTML = `
                <div style="display: flex; gap: 10px; align-items: center">
                    <div style="font-weight: bold">🤖 助手:</div>
                    <div class="loading-dots">
                        <div class="dot"></div>
                        <div class="dot"></div>
                        <div class="dot"></div>
                    </div>
                </div>
            `;
            return container;
        }

        async function sendMessage() {
            const input = document.getElementById('user-input');
            const btn = document.querySelector('button');
            const message = input.value.trim();
            if (!message) return;

            // 禁用输入和按钮
            input.disabled = true;
            btn.disabled = true;
            btn.textContent = '发送中...';

            appendMessage(message, true);
            input.value = '';
            
            // 添加加载状态
            const chatBox = document.getElementById('chat-box');
            const loadingIndicator = createLoadingIndicator();
            chatBox.appendChild(loadingIndicator);
            chatBox.scrollTop = chatBox.scrollHeight;

            try {
                const response = await fetch('/chat', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        message: message,
                        history: context
                    })
                });

                const data = await response.json();
                if (data.error) throw data.error;
                
                // 收到响应后移除加载状态
                chatBox.removeChild(loadingIndicator);
                appendMessage(data.response, false);
                context = data.context;
            } catch (error) {
                // 出错时也移除加载状态
                chatBox.removeChild(loadingIndicator);
                appendMessage(`出错: ${error}`, false);
            } finally {
                // 恢复输入和按钮
                input.disabled = false;
                btn.disabled = false;
                btn.textContent = '发送';
            }
        }

        // 允许回车发送
        document.getElementById('user-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') sendMessage();
        });
    </script>
</body>
</html> 